<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/echarts.min.js"></script>
    <style>
        .box {
            width: 500px;
            height: 500px;
            border: 1px solid #000;
        }
    </style>
</head>

<body>
    <div class="box"></div>
</body>

</html>
<script>
    let dom = document.querySelector(".box")
    let mychart = echarts.init(dom)
    let option = {
  title: {
    text: '雷达图'
  },
//   legend: {
//     data: ['Allocated Budget', 'Actual Spending']
//   },
  radar: {
    shape: 'circle',
    indicator: [
      { name: '小肖', max: 6500 },
      { name: '小路', max: 16000 },
      { name: '小凯', max: 30000 },
      { name: '诺诺', max: 38000 },
      { name: '小年', max: 52000 },
      { name: '小弦', max: 25000 }
    ],
    radius:120,
    // 坐标系起始值
    startAngle:180,
    startName:20,
    axisName: {
        color: '#fff',
        backgroundColor: '#666',
        borderRadius: 3,
        padding: [3, 5]
      },
      splitArea: {
        areaStyle: {
          color: ['#77EADF', '#26C3BE', '#64AFE9', '#428BD4'],
          shadowColor: 'rgba(0, 0, 0, 0.2)',
          shadowBlur: 10
        }
      },
      axisLine: {
        lineStyle: {
          color: 'rgba(211, 253, 250, 0.8)'
        }
      },
      splitLine: {
        lineStyle: {
          color: 'rgba(211, 253, 250, 0.8)'
        }
      }
    },
    
  series: [
    {
      name: 'Budget vs spending',
      type: 'radar',
      data: [
        {
           
          value: [5000, 14000, 28000, 26000, 42000, 21000],
          name: 'Actual Spending',
          areaStyle: {
            color: 'rgba(255, 228, 52, 0.6)'
          }
        }
      ]
    }
  ]
};
    mychart.setOption(option)

</script>